What is the difference between params and searchParams props in a page component? Can both be used in Server Components?

In Next.js page components, params and searchParams serve distinct purposes. params contains the dynamic route parameters defined by folder names in square brackets (like [slug]), while searchParams contains the URL's query string parameters (the part after ? in the URL). Both are available as props to page components in the App Router, and crucially, both can be used in Server Components—but with an important caveat: using searchParams opts the page into dynamic rendering at request time because query strings cannot be known at build time [citation:2][citation:6].

Yes, both params and searchParams can be used in Server Components—specifically in page components, which are Server Components by default [citation:2]. However, there are important distinctions. params is perfectly compatible with static generation: you can use generateStaticParams to pre-render pages for all known parameter combinations at build time [citation:4]. For example, an e-commerce site can pre-render all product pages by generating params for each product ID. searchParams, in contrast, forces dynamic rendering because its values cannot be known until request time—they depend on how the user interacts with the page [citation:2][citation:6][citation:9]. This trade-off is intentional: Next.js optimizes for static generation by default but gives you access to dynamic data when needed.

A significant change in Next.js 15 is that both params and searchParams are now Promises that must be awaited [citation:2][citation:9]. This change enables advanced patterns like streaming and partial rendering. In practice, this means you must use async/await or React's use() function to access the values. The official documentation emphasizes this breaking change: in version 14 and earlier, these props were synchronous, but in version 15, they are Promises (with a codemod available for migration) [citation:2]. This applies to both Server Components (using await) and Client Components (using React's use hook) [citation:2][citation:8].

For Client Components, Next.js provides the useSearchParams hook as an alternative to receiving searchParams as a prop [citation:3]. However, this hook has an important behavior: if used without a Suspense boundary in a statically rendered page, it will cause the component tree up to the nearest Suspense boundary to be client-side rendered, preserving the static shell while the dynamic part hydrates on the client [citation:3][citation:8]. The Next.js documentation strongly recommends wrapping components that use useSearchParams in a Suspense boundary to avoid fully client-side rendering [citation:8]. This pattern gives you the best of both worlds: a static shell with dynamic client-side hydration for the interactive parts that depend on query parameters.